<template>
  <div>
    <fullscreen :fullscreen.sync="fullscreen">
      <div class="container">
        <!-- 顶部 -->
        <div class="iot-top">
          <div class="top-left">
            木垒县新能源工程安全监管平台
            <img
              src="https://img.thgykj.com/thgy-file/XC/blowUp.png"
              v-if="!isFullShow"
              @click="blowUp"
              class="point"
            />
            <img
              src="https://img.thgykj.com/thgy-file/XC/blowDown.png"
              v-if="isFullShow"
              @click="blowUp"
              class="point"
            />
          </div>
          <div class="top-right" v-if="!ConfiGuration">
            <div class="right-but">
              <div class="rightbut-text">已安全生产</div>
              <div class="rightbut-img">{{ configform.value2 || 0}}</div>
              <!-- <div
                class="rightbut-img"
                v-if="safetyDays.toString().length > 1"
              >{{safetyDays.toString()[1] || 0}}</div>
              <div
                class="rightbut-img"
                v-if="safetyDays.toString().length > 2"
              >{{safetyDays.toString()[2]}}</div>-->
              <!-- <div class="rightbut-img">6</div> -->
              <div class="rightbut-text">天</div>
            </div>
            <!-- <div class="right-but" @click="updateDataer"> -->
            <div class="right-but">
              <div class="rightbut-text">项目倒计时</div>
              <div class="rightbut-img">{{ configform.value3 || 0}}</div>
              <!-- <div class="rightbut-img">{{configform.value3 || 0}}</div>
              <div class="rightbut-img">{{configform.value3 || 0}}</div>-->
              <div class="rightbut-text">天</div>
            </div>
            <!-- <div class="right-but" @click="updateData"> -->
            <div class="right-but">
              <div class="rightbut-text">项目总工期</div>
              <!-- <div class="rightbut-img">2</div>
              <div class="rightbut-img">7</div>-->
              <div class="rightbut-img">{{configform.value1 || 0}}</div>
              <div class="rightbut-text">天</div>
            </div>
            <!-- <div class="right-but" v-show="videoswtich" @click="camerabatch">
              <div class="rightbut-text">播放下一批</div>
            </div>-->
            <div class="right-buton" @click="onvideo">
              <div class="butontext">{{!videoswtich ? '查看摄像头' : '返回主屏幕'}}</div>
              <!-- <div class="butonicon" v-if="!videoswtich"></div> -->
              <div class="butonicon iconvideotwo" v-if="videoswtich"></div>
            </div>
          </div>
        </div>

        <!-- 中部 -->
        <div class="iot-con" v-if="!videoswtich">
          <!-- 左边地图 -->
          <div class="con-left">
            <div class="map-top">
              <!-- 工具 -->
              <div class="map-utils">
                <div class="backstage" @click="onbackstage"></div>
                <div class="utilsimg">
                  <p>
                    <i>{{ configform.value4 || 0}}</i>
                    <br />
                    <i>风机总数量</i>
                  </p>
                </div>
                <div class="utilsimg">
                  <p>
                    <i>{{configform.value10 || 0 }}</i>
                    <br />
                    <i>已安装风机</i>
                  </p>
                </div>
                <div class="utilsimg">
                  <p>
                    <i>{{ Number(configform.value4) - Number(configform.value10) || 0 }}</i>
                    <br />
                    <i>建设中风机</i>
                  </p>
                </div>
                <div class="utilsimg">
                  <p>
                    <i>{{configform.value11 || 0}}</i>
                    <br />
                    <i>吊装作业</i>
                  </p>
                </div>
              </div>

              <!-- 视图 -->
              <div class="map-view">
                <MarsMap />
                <!-- <div class="map-son">
                  <div class="text-son">摄像头:368个</div>
                  <div class="text-son">门禁数:368个</div>
                </div>-->
                <!-- <div class="mapdecoration mapone"></div>
                <div class="mapdecoration maptwo"></div>
                <div class="mapdecoration mapthere"></div>
                <div class="mapdecoration mapfour"></div>-->
              </div>
            </div>

            <div class="map-bot">
              <div
                class="mapview-left"
              >木垒县250万千瓦风电项目是自治区党委、政府重点工程，也是实现“双千双百双基地”目标、年内建成全疆首个县级千万千瓦级新能源基地的主体项目。</div>
              <div class="mapview-right">
                <div class="mapbox">
                  <div class="box-title">总投资</div>
                  <div class="box-content">
                    <div class="img">8</div>
                    <div class="img">2</div>
                    <div class="imgdian">.</div>
                    <div class="img">0</div>
                    <div class="img">0</div>
                    <div class="imgcont">亿元</div>
                  </div>
                </div>
                <div class="mapbox">
                  <div class="box-title">预计可节约标准煤</div>
                  <div class="box-content">
                    <div class="img">1</div>
                    <div class="img">8</div>
                    <div class="img">7</div>
                    <div class="imgdian">.</div>
                    <div class="img">9</div>
                    <div class="img">3</div>
                    <div class="imgcont">万吨</div>
                  </div>
                </div>
                <div class="mapbox">
                  <div class="box-title">预计年均发电量</div>
                  <div class="box-content">
                    <div class="img">6</div>
                    <div class="img">2</div>
                    <div class="imgdian">.</div>
                    <div class="img">5</div>
                    <div class="img">0</div>
                    <div class="imgcont">亿元</div>
                  </div>
                </div>
                <div class="mapbox">
                  <div class="box-title">预计减少二氧化碳排放量</div>
                  <div class="box-content">
                    <div class="img">6</div>
                    <div class="img">2</div>
                    <div class="img">3</div>
                    <div class="imgdian">.</div>
                    <div class="img">1</div>
                    <div class="img">3</div>
                    <div class="imgcont">万吨</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 输入框 -->
          </div>

          <!-- 右边数据 -->
          <div class="con-right">
            <div class="data-top">
              <div class="data-box">
                <div class="boxdata-title">设备管理</div>
                <div class="boxdata-contet">
                  <div class="device">
                    <div class="device-two">
                      <div class="dev-img"></div>
                      <div class="dev-cont">
                        <p>已安装风机</p>
                        <p>{{configform.value10 || 0}}</p>
                      </div>
                    </div>
                    <div class="device-one">
                      <div class="dev-img"></div>
                      <!-- <div class="dev-cont" @click="goToExternalPage"> -->
                      <div class="dev-cont">
                        <p>已装摄像头</p>
                        <p>{{cameraNum || 0}}</p>
                      </div>
                    </div>
                  </div>
                  <div class="device-content">
                    <BarDevicenet />
                  </div>
                </div>
              </div>
              <div class="data-box">
                <div class="boxdata-title">三日天气消息</div>
                <div class="boxdata-contet">
                  <!-- <ColoumnarWeather /> -->
                  <Weather />
                </div>
              </div>
              <div class="data-box">
                <div class="boxdata-title">告警事件</div>
                <div class="boxdata-contet">
                  <!-- <div class="warn-title">
                    <div class="but-left">
                      <div
                        class="tab-button"
                        :class="{ active: activeTab === 'tab1' }"
                        data-tab="tab1"
                        @click="onwarn('tab1')"
                      >当月</div>
                      <div
                        class="tab-button"
                        :class="{ active: activeTab === 'tab2' }"
                        data-tab="tab2"
                        @click="onwarn('tab2')"
                      >累计</div>
                    </div>
                    <div class="but-right">详情 ></div>
                  </div>-->
                  <div class="warn-data">
                    <div class="warnd-box">
                      <div class="box-topd">
                        <div class="box-icon"></div>
                        <div class="box-text">脱帽报警</div>
                      </div>
                      <div class="warnd-bottom">34</div>
                    </div>

                    <div class="warnd-box">
                      <div class="box-topd">
                        <div class="box-icon"></div>
                        <div class="box-text">静电报警</div>
                      </div>
                      <div class="warnd-bottom">16</div>
                    </div>
                    <div class="warnd-box">
                      <div class="box-topd">
                        <div class="box-icon"></div>
                        <div class="box-text">离开围栏</div>
                      </div>
                      <div class="warnd-bottom">18</div>
                    </div>
                  </div>
                  <div class="warn-view">
                    <!-- <BarRater /> -->
                    <TableList />
                  </div>
                </div>
              </div>
              <div class="data-box">
                <div class="boxdata-title">未销项隐患</div>
                <div class="boxdata-contet">
                  <!-- <div class="quality" @click="onqualitydata"> -->
                  <div class="quality">
                    <p>{{configform.value5 || 0}}</p>
                    <i>质量问题</i>
                  </div>
                  <!-- <div class="quality" @click="onsafetydata"> -->
                  <div class="quality">
                    <p>{{configform.value7 || 0}}</p>
                    <i>安全问题</i>
                  </div>
                </div>

                <div class="boxdata-contet">
                  <div class="quality">
                    <p>{{configform.value6 || 0}}</p>
                    <i>已解决</i>
                  </div>
                  <div class="quality">
                    <p>{{configform.value8 || 0}}</p>
                    <i>已解决</i>
                  </div>
                </div>

                <div class="animateing"></div>
              </div>
            </div>
            <div class="data-bot">
              <div class="boxdata-title">大事件</div>
              <div class="boxdata-contet">
                <div class="event-left">
                  <DatavTable ref="DatavTable" />
                </div>
                <div class="event-right">
                  <AutoCarousel />
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 视频 -->
        <div class="iot-video" v-else>
          <div class="absolute-container" :class="activeswtich ? 'active' : '' ">
            <div class="video-left">
              <!-- <div class="video-title" @click="videoplay"> -->
              <!-- <div class="video-title" :class="activeswtich ? 'active-title' : '' "> -->
              <div class="video-title">视频列表</div>
              <div class="videoicon" @click="toggleActive($event.currentTarget)">
                <!-- :class="activeswtich ? 'videoicon-box' : '' " -->
                <!-- 视频列表 -->
                <i class="el-icon-d-arrow-left" v-if="!activeswtich"></i>
                <i class="el-icon-d-arrow-right" v-else></i>
              </div>
              <div class="video-content">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
                  <span class="custom-tree-node" slot-scope="{data}">
                    <img
                      :src="treeicon.one"
                      alt
                      v-if="data.isFlowPass == 1"
                      class="responsive-image"
                    />
                    <!-- {{data.isFlowPass}}-{{data.name}} -->
                    {{data.name}}
                  </span>
                </el-tree>
              </div>
            </div>
          </div>
          <div class="video-right" :class="activeswtich ? 'active-right' : '' ">
            <VideoPreview
              :getIndexCode="getIndexCode"
              :activeswtich="activeswtich"
              :getIndexarry="getIndexarry"
              ref="Videobox"
            />
          </div>
        </div>

        <!-- 底部 -->
        <div class="iot-bot">
          <p>经度: 117.206201</p>
          <p>纬度: 31.803394</p>
          <p>横: 3520126</p>
          <p>纵: 3520126</p>
          <p>海拔: 32.2米</p>
          <p>层级: 13</p>
          <p>方向: 360°</p>
          <p>俯仰角: -90°</p>
          <p>视高: 8919.8米</p>
        </div>
      </div>
    </fullscreen>
  </div>
</template>
<script>
// 配置页面
import ConfiGuration from "./components/ConfiGuration.vue";
// 设备管理
import BarDevicenet from "./components/BarDevicen.vue";
// datav-轮播表
import DatavTable from "./components/DatavRan.vue";
// 告警
// import BarRater from './components/PieVoicer.vue'
// 天气
// import ColoumnarWeather from './components/ColoumnarWeather.vue'
// 地图
import MarsMap from "./components/MarsMap.vue";
// 轮播图
import AutoCarousel from "./components/CarouselView.vue";
import TableList from "./components/TableList.vue";
import Weather from "./components/Weather.vue";
// 视频播放组件
import VideoPreview from "./components/VideoPreview.vue";
// 公共变量
import { TOKEN_PROD, TOKEN_DEV, VUE_BASE_API } from "@/utils/publicdata";
import { TimeSelect } from "element-ui";

const axios = require("axios");
export default {
  name: "iot",
  components: {
    BarDevicenet,
    DatavTable,
    // BarRater,
    // ColoumnarWeather,
    TableList,
    Weather,
    MarsMap,
    AutoCarousel,
    VideoPreview,
    ConfiGuration
  },
  data() {
    return {
      // 项目
      projectswtich: "",
      // 项目类别
      projectname: false,
      // projectname:["",""]
      // 风机数据
      // draughtobj: {},
      // 全屏开关
      fullscreen: false,
      // 全屏切换按钮
      isFullShow: false,
      activeTab: "tab1", // 默认激活的标签
      // 视频开关
      videoswtich: false,
      // 树形结构数据
      data: [
        // {
        //   name: "暂无数据-token过期",
        //   list: ""
        // }
      ],
      defaultProps: {
        children: "list",
        label: "name"
      },
      // 摄像头编号
      getIndexCode: "",
      // 摄像头编号组
      getIndexarry: [],
      // 摄像头移动开关
      activeswtich: false,
      // 树形结构-icon
      treeicon: {
        one: require("@/assets/iotimg/hoisting(1).svg")
      },

      // 树形结构-摄像头编号-只取9个
      currentIndex: 0,
      // 树形结构-全部摄像头数据
      serialNumbers: [],
      // 每次摄像头序列号-分批次
      serialNumbersitem: [],
      // 倒计时
      countdown: parseInt(localStorage.getItem("countdown")) || 181,
      safetyDays: parseInt(localStorage.getItem("safetyDays")) || 95,
      intervalId: null,
      // 质量问题
      qualitydata: 23,
      qualitydatasolve: 12,
      // 安全问题
      safetydata: 16,
      safetydatasolve: 10,
      // 配置页面开关
      ConfiGuration: false,
      // 配置
      configform: {},
      // 摄像头数量
      cameraNum: 0,
      // 定时任务配置
      config: {
        time: "23:30:00", // 每天几点执行
        interval: 1, // 隔几天执行一次
        runNow: false, // 是否立即执行
        intervalTimer: "",
        timeOutTimer: ""
      }
    };
  },
  // watch: {
  //   videoswtich(newVal, oldVal) {
  //     console.log("子组件接收数据", newVal);
  //     this.$nextTick(() => {
  //       this.getNextBatch();
  //       console.log("处置摄像头播放数据--分批次", this.serialNumbersitem);

  //       this.getIndexarry = this.serialNumbersitem;
  //     });
  //   }
  // },
  created() {
    // 全屏状态保持
    // console.log("localStorage.getItem", localStorage.getItem("fullscreen"));
    // 树结构数据
    // this.getTree();
    // 风机数量
    // this.draught();
    // 倒计时
    // this.updateDataAt8AM();
    this.getlistdata();

    this.setTimedTask();
  },
  mounted() {
    this.currentTime();
    const that = this;
    this.$nextTick(() => {
      if (localStorage.getItem("fullscreen") == "true") {
        console.log("hjghfdghfh");
        this.fullscreen = true;
        this.isFullShow = true;
        console.log("that.$refs.fullscreenclick", that.$refs.fullscreenclick);
      }
    });
    // 监听按键事件
    // window.addEventListener("keydown", this.KeyDown, true);
    window.addEventListener("keydown", this.KeyDown);
    // 监听 popstate 事件
    window.addEventListener("popstate", this.handleBackButton);
  },
  beforeDestroy() {
    // 清除定时器
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
    // console.log('销毁定时器')
    // 在Vue实例销毁前，清除时间定时器
    clearInterval(this.currenttime);
    clearInterval(this.timecollection);
    // 组件销毁时移除事件监听
    window.removeEventListener("popstate", this.handleBackButton);
    // 清除任务定时器
    clearInterval(this.config.intervalTimer);
    // 清除定时器timeout
    clearTimeout(this.config.timeOutTimer);
  },
  methods: {
    // 定时任务
    // 设置定时任务
    setTimedTask() {
      // 默认为false，true为立即触发，看你的需求，如果设置为true则立刻运行任务函数
      if (this.config.runNow) {
        this.initBusinessFn();
      }
      // 获取下次要执行的时间，如果执行时间已经过了今天，就让把执行时间设到明天的按时执行的时间
      const nowTime = new Date().getTime();
      const timePoint = this.config.time.split(":").map(i => parseInt(i));

      let recent = new Date().setHours(...timePoint); // 获取执行时间的时间戳

      if (recent <= nowTime) {
        recent += 24 * 60 * 60 * 1000;
      }
      // 要执行的时间减去现在的时间，就是程序要多少秒之后执行
      const doRunTime = recent - nowTime;
      this.config.timeOutTimer = setTimeout(this.setTimer, doRunTime);
    },

    // 设置定时器
    setTimer() {
      console.log("进入定时器了");
      // 这里是将在你设置的时间点执行你的业务函数
      // this.initTopTenBusiness();
      this.initBusinessFn();
      // 每隔多少天再执行一次，这里设置的是24小时
      const intTime = this.config.interval * 24 * 60 * 60 * 1000;
      this.config.intervalTimer = setInterval(this.initBusinessFn, intTime);
    },

    // 你的业务函数 这里列举的是刷新浏览器
    initBusinessFn() {
      console.log("定时任务函数触发了，即将刷新页面");
      if (this.configform.value3 > 0) {
        console.log("this.configform.value3", this.configform.value3);
        console.log("this.configform.value2", this.configform.value2);
        this.configform.value3 = Number(this.configform.value3) - 1;
        this.configform.value2 = Number(this.configform.value2) + 1;

        // 定义请求的URL
        const url = `${VUE_BASE_API}/xmgl/mlConfig/edit`;

        // console.log("TOKEN_PROD", TOKEN_PROD);

        // 定义请求头
        const headers = {
          Authorization: TOKEN_PROD,
          "Content-Type": "application/json"
        };

        const requestBody = this.configform;

        // 发送GET请求
        axios
          .post(url, requestBody, { headers })
          .then(response => {
            // 从响应中提取total的值
            console.log("response", response);
            if (response.data.code == "200") {
              // this.$message.success("配置成功-请回到主页面");
            }
          })
          .catch(error => {
            console.error("Error:", error.message);
          });
      }
    },

    // 查询数据
    getlistdata() {
      console.log("123456");
      // 定义请求的URL
      const url = `${VUE_BASE_API}/xmgl/mlConfig/list`;

      console.log("TOKEN_PROD", TOKEN_PROD);

      // 定义请求头
      const headers = {
        Authorization: TOKEN_PROD,
        "Content-Type": "application/json"
      };
      axios
        .post(url, {}, { headers })
        .then(response => {
          // 从响应中提取total的值
          // console.log("查询数据", response.data);
          // console.log("查询数据", response.data.code);
          if (response.data.code == "200") {
            this.configform = response.data.result[0];
            this.cameraNum = JSON.parse(this.configform.value9).reduce(
              (acc, obj) => acc + Number(obj.shexain),
              0
            );
            console.log("==1111===", this.cameraNum);
          }
        })
        .catch(error => {
          console.error("Error:", error.message);
        });
    },
    // 跳转配置页面
    onconfig() {
      this.ConfiGuration = true;
    },
    onbackstage() {
      window.location.href = "http://222.80.185.228:6090/#/login?UID=4";
      // window.location.href = "http://222.80.185.228:6090/#/login";
    },
    toggleActive(element) {
      // // 获取 video-left 元素
      // const videoLeft = element.closest(".video-left");

      // // 切换 active 类
      // videoLeft.classList.toggle("active");
      // const videoLeft = element.closest(".video-left");
      // videoLeft.classList.toggle("active");
      const isFullScreen = document.fullscreenElement !== null;
      console.log("Is Full Screen:", isFullScreen);
      if (!this.isFullShow && !isFullScreen) {
      }

      this.activeswtich = !this.activeswtich;

      // this.$nextTick(() => {
      //   console.log("父组件适配窗口");
      //   this.$refs.Videobox.setWndCover();
      // });
    },
    handleBackButton() {
      // 强制跳转到指定地址
      console.log("后退了================================================");
      // window.location.href = "http://222.80.185.228:6090/#/login?UID=4";
    },
    videoplay() {
      this.$refs.Videobox.previewVideo();
    },
    // 树形结构点击
    handleNodeClick(data, node) {
      console.log("json-数据", data);
      if (!data.serialNumber) {
        console.log("选择下级数据");
        // this.$message.warning("请选择下级数据");
      } else {
        console.log("json-数据-摄像头序列号", data);
        // 可以播放摄像头数据-5f97416b6e694311a805b650d6043309

        console.log("当前节点数据:", data);
        console.log("当前节点对象:", node);

        // 获取父节点对象
        const parentNode = node.parent;
        if (parentNode && parentNode.data) {
          console.log("父节点数据:", parentNode.data.projectName);
          console.log("======数据=====", this.projectswtich);

          // this.projectswtich !== parentNode.data.projectName &&

          console.log("data.appSecret", data.appSecret);
          console.log("this.projectswtich", this.projectswtich);
          // if (
          //   data.appSecret !== "ranNtu1glotsEG3YN2KR" &&
          //   this.projectswtich !== "古尔班通古特沙漠基地52.5万千瓦新能源项目"
          // ) {
          //   console.log(
          //     "===========================特沙漠基地52.5万================================"
          //   );
          // }
          // if (
          //   this.$refs.Videobox.objData.appSecret == "ranNtu1glotsEG3YN2KR" &&
          //   this.projectswtich == "古尔班通古特沙漠基地52.5万千瓦新能源项目"
          // ) {
          //   console.log(
          //     "===========================特沙漠基地52.5万================================"
          //   );
          // }

          if (this.projectname && data.appSecret != "ranNtu1glotsEG3YN2KR") {
            let a = {};
            a.appkey = data.appId;
            a.ip = data.account;
            a.secret = data.appSecret;
            a.port = Number(data.password);
            a.playMode = 0;
            a.layout = "3x3";

            this.$refs.Videobox.objData = a;
            this.$refs.Videobox.initvideo();

            setTimeout(() => {
              this.getIndexCode = data.serialNumber;
            }, 900);

            console.log("子组件数据", this.getIndexCode);
            this.projectswtich = parentNode.data.projectName;
            this.projectname = parentNode.data.projectName.includes("古尔班");
          }

          if (
            this.projectswtich !== parentNode.data.projectName &&
            data.appSecret == "ranNtu1glotsEG3YN2KR"
          ) {
            let a = {};
            a.appkey = data.appId;
            a.ip = data.account;
            a.secret = data.appSecret;
            a.port = Number(data.password);
            a.playMode = 0;
            a.layout = "3x3";

            this.$refs.Videobox.objData = a;
            this.$refs.Videobox.initvideo();

            setTimeout(() => {
              this.getIndexCode = data.serialNumber;
            }, 900);

            console.log("子组件数据", this.getIndexCode);
            this.projectswtich = parentNode.data.projectName;
            this.projectname = parentNode.data.projectName.includes("古尔班");
          } else {
            this.getIndexCode = data.serialNumber;
            this.projectswtich = parentNode.data.projectName;
            this.projectname = parentNode.data.projectName.includes("古尔班");
          }
        } else {
          console.log("当前节点是根节点，没有父节点");
        }
      }
    },
    // 切换摄像头
    onvideo() {
      this.videoswtich = !this.videoswtich;

      if (this.videoswtich) {
        this.getTree();
      }
    },
    // currentTime() {},
    // 跳转项目
    goToExternalPage() {
      // window.open("http://222.80.185.228:6090/#/login?UID=4", "_blank");
      window.location.href = "http://222.80.185.228:6090/#/login?UID=4";
      // window.location.assign = "http://222.80.185.228:6090/#/login?UID=4"
    },
    //
    onwarn(tab) {
      this.activeTab = tab; // 切换激活的标签
    },
    // 全屏按钮
    blowUp() {
      this.fullscreen = !this.fullscreen;
      this.isFullShow = !this.isFullShow;
      // 全屏状态保持
      localStorage.setItem("fullscreen", this.fullscreen);
    },
    // 键盘F11 事件
    KeyDown(event) {
      console.log(
        "event-触发f11================================================================",
        event
      );
      if (event.keyCode === 122) {
        // 组织默认行为
        // event.preventDefault();
        console.log("执行F11-------------------");
        this.isFullShow = !this.isFullShow;
        this.isFullScreen = !this.isFullScreen;
      }
    },
    // 模拟全屏
    fullscreenclick() {
      this.fullscreen = true;
      this.isFullShow = true;
    },
    // 风机数量
    draught() {
      // 定义请求的URL
      const url = `${VUE_BASE_API}/xmgl/mlHoist/stats`;

      // 定义请求头
      const headers = {
        Authorization: TOKEN_PROD,
        "Content-Type": "application/json"
      };

      // 发送GET请求
      axios
        .get(url, { headers })
        .then(response => {
          // 从响应中提取total的值
          this.draughtobj = response.data.result;
          console.log("Total:", this.draughtobj);
        })
        .catch(error => {
          console.error("Error:", error.message);
        });
    },
    currentTime() {},
    // 树结构数据
    getTree() {
      // 定义请求体参数
      const requestBody = {
        sn: "E7D6E86A83E841BAA53E73ACD7C2371B",
        videoType: 1,
        standardType: 0
      };

      // 定义请求头
      const headers = {
        Authorization: TOKEN_PROD, // 替换为你的实际 token
        "Content-Type": "application/json"
      };

      // 发送 POST 请求
      axios
        .post(
          `${VUE_BASE_API}/xmgl/company/getComapnyStatisticsList?lang=zh_CN`,
          requestBody,
          { headers }
        )
        .then(response => {
          if (response.data.keyCode == 401)
            return this.$message.warning("身份信息过期-请联系管理员");
          // console.log("树结构数据", response.data);
          console.log("树结构数据", response.data.result.projectList);
          this.data = response.data.result.projectList;
          this.traverseList(this.data);
          // console.log("处置摄像头播放数据--2", this.serialNumbers);

          console.log("数据", response.data.result.projectList[0].list[0]);

          let a = {};
          a.appkey = response.data.result.projectList[0].list[0].appId;
          a.ip = response.data.result.projectList[0].list[0].account;
          a.secret = response.data.result.projectList[0].list[0].appSecret;
          a.port = Number(response.data.result.projectList[0].list[0].password);
          a.playMode = 0;
          a.layout = "3x3";

          // 判断是同一个项目
          this.projectswtich = response.data.result.projectList[0].projectName;

          console.log(
            "this.$refs.Videobox.objData",
            this.$refs.Videobox.objData
          );
          this.$refs.Videobox.objData = a;

          console.log(
            "this.$refs.Videobox.objData",
            this.$refs.Videobox.objData
          );

          setTimeout(() => {
            this.$refs.Videobox.initvideo();
          }, 500);
        })
        .catch(error => {
          console.error(
            "Error:",
            error.response ? error.response.data : error.message
          );
        });
    },

    // 获取所有摄像头序列号
    traverseList(list) {
      if (!list || list.length === 0) return;

      list.forEach(item => {
        if (item.serialNumber) {
          this.serialNumbers.push(item.serialNumber);
        }
        // 如果有嵌套的 list，继续递归遍历
        if (item.list && item.list.length > 0) {
          this.traverseList(item.list);
        }
      });
    },

    // 获取摄像头序列号-分批次
    getNextBatch() {
      if (this.currentIndex >= this.serialNumbers.length) {
        console.log("所有数据已完成");
        return;
      }
      this.serialNumbersitem = this.serialNumbers.slice(
        this.currentIndex,
        this.currentIndex + 9
      );
      this.currentIndex += 9;
    },

    camerabatch() {
      this.getNextBatch();
      console.log("处置摄像头播放数据--分批次", this.serialNumbersitem);

      this.getIndexarry = this.serialNumbersitem;
    },
    // 倒计时
    updateDataAt8AM() {
      console.log("触发更新机制");
      const now = new Date();
      const targetTime = new Date();
      targetTime.setHours(11, 6, 0, 0); // 设置目标时间为早上8点

      // 如果当前时间已经过了8点，则设置为第二天的8点
      if (now > targetTime) {
        console.log("===============执行刷新时间===========");
      }

      const timeUntil8AM = targetTime - now;

      console.log("timeUntil8AM", timeUntil8AM);
      // 设置定时器，在8点时更新数据
      setTimeout(() => {
        this.updateData();
        // 每天8点更新一次
        this.intervalId = setInterval(() => {
          console.log("===============执行刷新时间===========");
          // 修改数据
          // 调用数据库数据
        }, 24 * 60 * 60 * 1000); // 24小时
      }, timeUntil8AM);
    },
    updateData() {
      // if (localStorage.getItem("countdown") == 0 || ) return

      // console.log(
      //   'localStorage.getItem("countdown")-123456789',
      //   localStorage.getItem("countdown")
      // );

      if (localStorage.getItem("countdown") == 0) return;

      // console.log("执行111");
      // 在这里更新你的数据
      this.countdown -= 1;
      this.safetyDays += 1;

      // 将更新后的数据保存到 localStorage
      localStorage.setItem("countdown", this.countdown);
      localStorage.setItem("safetyDays", this.safetyDays);
    },
    updateDataer() {
      // console.log("执行111");
      // 在这里更新你的数据
      this.countdown += 1;
      this.safetyDays -= 1;

      // 将更新后的数据保存到 localStorage
      localStorage.setItem("countdown", this.countdown);
      localStorage.setItem("safetyDays", this.safetyDays);
    },

    onqualitydata() {
      if (this.qualitydata == 0) return;
      this.qualitydata -= 1;
      this.qualitydatasolve += 1;
    },

    onsafetydata() {
      if (this.safetydata == 0) return;
      this.safetydata -= 1;
      this.safetydatasolve += 1;
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  //   background-color: #00162e;
  height: 1083px;
  weight: 1923px;
  display: flex;
  flex-direction: column;
  // background: linear-gradient(180deg, #0e1629 0%, #0785c4 100%);
  background: linear-gradient(180deg, #00091c 0%, #006ea7 100%);
  // background: url("~@/assets/iotimg/gsiotback.png") no-repeat center center;
  // background-size: cover;
  // background-size: 100% 100%;

  .iot-top {
    width: 100%;
    height: 100px;
    // background: skyblue;
    background: url("~@/assets/iotimg/头部大色块.png") no-repeat center center;
    background-size: cover;
    background-size: 100% 100%;
    display: flex;
    align-items: center;

    .top-left {
      width: 772px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
      font-weight: bold;
      font-size: 30px;
      letter-spacing: 5px;
      letter-spacing: 9px;
      text-shadow: 0px 0px 6px #06bdfb;
      text-align: center;
      font-style: normal;
      text-transform: none;
      color: #ffffff;

      img {
        width: 30px;
        height: 30px;
        cursor: pointer;
      }
    }

    .top-right {
      flex: 1;
      //   background: skyblue;
      display: flex;
      .right-buton {
        cursor: pointer;
        flex: 1;
        height: 50px;
        background: url("~@/assets/iotimg/分组 6.png") no-repeat center center;
        background-size: cover;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .butontext {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 20px;
          color: #66d3f2;
          margin-right: 10px;
        }

        .butonicon {
          width: 18px;
          height: 18px;
          background: #66d3f2;
          background: url("~@/assets/iotimg/Group 4715.png") no-repeat center
            center;
          background-size: cover;
          background-size: 100% 100%;
        }

        .iconvideotwo {
          background: url("~@/assets/iotimg/Group 4716.png") no-repeat center
            center;
          background-size: cover;
          background-size: 100% 100%;
        }
      }

      .right-but {
        flex: 1;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url("~@/assets/iotimg/头部小色块.png") no-repeat center
          center;
        background-size: cover;
        background-size: 100% 100%;
        cursor: pointer;

        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;

        .rightbut-text {
          // background: skyblue;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #ffffff;
          padding-bottom: 5px;
        }

        .rightbut-img {
          background: url("~@/assets/iotimg/倒计时底块.png") no-repeat center
            center;
          background-size: cover;
          background-size: 100% 100%;
          padding: 10px 8px;
          margin: 0 3px 5px;
          font-size: 17px;
          font-weight: 700;
        }
      }
    }
  }
  // 视频
  .iot-video {
    flex: 1;
    background: url("~@/assets/iotimg/Group 4727.png") no-repeat center center;
    background-size: cover;
    background-size: 100% 100%;
    display: flex;
    padding: 35px;
    position: relative;

    .active {
      transform: translateX(-410px); /* 向左移动 376px */
      margin-right: 20px;
    }
    .absolute-container {
      width: 375px;
      max-height: 888px;
      position: relative;
      margin-right: 40px;
      transition: transform 2s ease; /* 添加过渡效果 */
      background: #001e53;
      background: url("~@/assets/iotimg/Rectangle 34624169.png") no-repeat
        center center;
      background-size: cover;
      background-size: 100% 100%;
    }
    .video-left {
      width: 375px;
      max-height: 888px;
      display: flex;
      flex-direction: column;

      overflow-y: auto;
      padding-top: 48px;

      // overflow: hidden;

      /* 修改滚动条的样式 */
      &::-webkit-scrollbar {
        width: 10px; /* 滚动条的宽度 */
      }

      &::-webkit-scrollbar-track {
        background: #082966; /* 滚动条轨道的背景颜色 */
        border-right: 4px solid rgba(2, 191, 198, 0.6);
      }

      &::-webkit-scrollbar-thumb {
        background: #09e1e1; /* 滚动条滑块的颜色 */
        border-radius: 5px; /* 滚动条滑块的圆角 */
      }

      &::-webkit-scrollbar-thumb:hover {
        background: #09e1e1; /* 滚动条滑块在悬停时的颜色 */
      }

      .active-title {
        top: 0 !important;
        // .videoicon {
        //   margin-right: 40px;
        //   width: 30px;
        //   height: 40px;
        // }
      }

      .video-title {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px 0 25px;
        height: 55px;
        width: 367px;
        position: absolute;
        left: 4px;
        top: 0px;
        background: url("~@/assets/iotimg/Rectangle 34624166.png") no-repeat
          center center;
        background-size: cover;
        background-size: 100% 100%;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #ffffff;
        z-index: 10;
        background: #062966;
        border-top: 4px solid #02bfc6;
        overflow: hidden;
      }

      .videoicon-box {
        width: 30px !important;
        background-color: #ccc !important;
      }

      .videoicon {
        width: 90px;
        height: 500px;
        background: url("~@/assets/iotimg/2024-9-20-left-1.png") no-repeat
          center center;
        background-size: cover;
        background-size: 100% 100%;
        position: absolute;
        left: 370px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
        // padding: 30px 0;
        text-align: center;
        // background-color: #5f9fbc;
        cursor: pointer;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        writing-mode: vertical-lr;

        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-left: 7px;
        writing-mode: vertical-rl;

        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;

        i {
          margin-top: 10px;
          font-size: 20px;
          color: #81e5f7;
        }
      }

      .video-content {
        flex: 1;
        padding: 10px;

        ::v-deep .el-tree {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #ffffff;
          background: linear-gradient(
            180deg,
            #082a68 0%,
            #001e53 100%
          ) !important;

          .responsive-image {
            vertical-align: middle;
          }

          .custom-tree-node {
            display: inline-block;
            max-width: 310px; /* 设置最大宽度 */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          /* 设置树形结构的背景颜色 */
          .el-tree-node__content {
          }

          /* 设置悬停颜色 */
          .el-tree-node__content:hover {
            background-color: #66d3f2 !important; /* 自定义悬停颜色 */
          }
          .el-tree-node.is-current > .el-tree-node__content {
            background-color: #66d3f2 !important;
          }

          .el-tree-node:focus > .el-tree-node__content {
            background-color: #66d3f2 !important;
          }

          .el-tree-node__content:hover,
          .el-upload-list__item:hover {
            background-color: #66d3f2 !important;
          }

          /* 设置选中颜色 */
          .el-tree-node.is-current > .el-tree-node__content {
            background-color: #66d3f2 !important; /* 自定义选中颜色 */
          }
        }
      }
    }

    .video-right {
      flex: 1;
      // background: skyblue;
      border: 1px solid skyblue;
      transition: transform 2s ease;
    }

    .active-right {
      margin-left: -340px !important;
    }
  }

  // 大屏
  .iot-con {
    flex: 1;
    display: flex;

    .con-left {
      //    background: skyblue;
      flex: 1;
      display: flex;
      flex-direction: column;

      .map-top {
        flex: 1;
        display: flex;

        .map-utils {
          width: 150px;
          padding: 10px 0 0 30px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;

          .backstage {
            width: 55px;
            height: 55px;
            background: url("~@/assets/iotimg/2024-9-18-4.png") no-repeat center
              center;
            background-size: cover;
            background-position: 100% 100%;
            cursor: pointer;
          }

          .utilsimg {
            // background: skyblue;

            cursor: pointer;
            i {
              font-style: normal;
              display: block;
              margin-bottom: -2px;
              font-weight: 600;
              color: #ffffff;
              z-index: 999;
            }
            p i:nth-of-type(2) {
              /* 在这里添加你想要的样式 */
              color: #f7f0f0; /* 例如，将文字颜色改为红色 */
              font-weight: 550; /* 例如，将文字加粗 */
              margin-top: -15px;
            }

            p i:nth-of-type(1) {
              font-size: 18px;
            }

            p {
              width: 110px;
              height: 110px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              position: relative;

              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 14px;
              z-index: 999;
              color: #ffffff;
            }

            p::after {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              // transform: translate(-50%,-50%);
              width: 110px;
              height: 110px;
              display: block;
              background: url("~@/assets/iotimg/左圆环1.png") no-repeat center
                center;
              background-size: cover;
              background-position: 100% 100%;
              animation: rotate 6s infinite linear;
            }
          }
        }

        .map-view {
          flex: 1;
          display: flex;
          position: relative;

          .mapone {
            left: 202px;
            top: 177px;
            background: red;
          }

          .maptwo {
            left: 324px;
            top: 280px;
            background: yellow;
          }

          .mapthere {
            left: 450px;
            top: 212px;
            background: skyblue;
          }
          .mapfour {
            left: 573px;
            top: 139px;
          }

          @keyframes bounce {
            0%,
            100% {
              transform: translateY(0);
            }
            50% {
              transform: translateY(20px); /* 向上移动20px */
            }
          }

          .mapdecoration {
            width: 45px;
            height: 200px;
            position: absolute;
            background: url("~@/assets/iotimg/地图坐标光柱.png") no-repeat
              center center;
            background-size: cover;
            background-size: 100% 100%;
            animation: bounce 2s infinite;
          }

          .map-son {
            width: 150px;
            height: 70px;
            position: absolute;
            background: url("~@/assets/iotimg/地图气泡底.png") no-repeat center
              center;
            background-size: cover;
            background-size: 100% 100%;
            left: 50px;
            top: 100px;
            padding-top: 15px;

            .text-son {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #ffffff;
            }
          }
        }
      }

      .map-bot {
        // background: yellow;
        height: 230px;
        display: flex;
        background: url("~@/assets/iotimg/左下框-1.png") no-repeat center center;
        background-size: cover;
        background-size: 100% 100%;
        padding: 10px;
        border-image: linear-gradient(
            89deg,
            rgba(21, 221, 219, 1),
            rgba(12, 218, 218, 1)
          )
          1 1;

        .mapview-left {
          flex: 2;
          //   background: skyblue;
          padding: 0 10px 0 20px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          // color: #b4ecf5;
          color: #6af4ff;
          display: flex;
          justify-content: center;
          align-items: center;
          text-indent: 1em;
          text-align: left;
        }

        .mapview-right {
          flex: 3;
          display: flex;
          flex-wrap: wrap;
          //   background: skyblue;

          .mapbox {
            padding: 3px 10px 15px;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;

            .box-title {
              font-family: PingFang SC, PingFang SC;
              font-weight: 550;
              font-size: 16px;
              // color: #00fcef;
              color: #fff;
              padding-bottom: 5px;
            }

            .box-content {
              display: flex;
              align-items: center;
              //   background: skyblue;

              .img {
                // background: skyblue;
                background: url("~@/assets/iotimg/sm-box.png") no-repeat center
                  center;
                background-size: cover;
                background-size: 100% 100%;
                padding: 8px 7px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 800;
                font-size: 22px;
                color: #ffd870;
                margin-right: 2px;
              }

              .imgdian {
                padding: 12px 0 10px;
                // background: skyblue;
                font-size: 30px;
                color: #ffd870;
              }

              .imgcont {
                padding-left: 15px;
                padding-top: 12px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 800;
                font-size: 13px;
                color: #ffd870;
              }
            }

            &:nth-child(1),
            &:nth-child(3) {
              width: 40%;
            }

            &:nth-child(2),
            &:nth-child(4) {
              padding-left: 15px;
              width: 60%;
              //   background: yellow;
            }
          }
        }
      }
    }

    .con-right {
      flex: 1;
      //   background: skyblue;
      padding: 15px 15px 15px 40px;
      display: flex;
      flex-direction: column;

      .data-top {
        flex: 1;
        display: flex;
        flex-wrap: wrap;

        .data-box {
          //   background: yellow;
          height: 48%;
          width: 48%;
          display: flex;
          flex-direction: column;

          .quality {
            // padding: 10px;
            i {
              font-weight: 600;
            }
          }

          &:nth-child(1),
          &:nth-child(3) {
            margin-right: 3%;
          }
          @keyframes moveAndScale {
            0% {
              transform: translateZ(0) scale(1);
            }
            50% {
              transform: translateZ(20px) scale(1.2);
            }
            100% {
              transform: translateZ(0) scale(1);
            }
          }

          &:nth-child(4) {
            display: flex;
            // background: red;

            position: relative;

            .animateing {
              width: 180px;
              height: 180px;
              position: absolute;
              left: 30%;
              top: 20%;
              // transform: translate(-50%, -50%);

              background: url("@/assets/images/safety.png");
              background-position: center center;
              background-repeat: no-repeat;
              animation: moveAndScale 2s infinite;
              transform-style: preserve-3d;
            }

            .boxdata-contet {
              height: calc(50% - 15px);
              display: flex;
              justify-content: space-between;

              .quality:hover {
                transform: scale(1.2);
              }

              .quality {
                padding: 0 24px;
                // flex: 1;
                cursor: pointer;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                transition: all 1s ease;

                p {
                  width: 78px;
                  height: 78px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  position: relative;

                  font-family: PingFang SC, PingFang SC;
                  font-weight: 800;
                  font-size: 28px;
                  color: #ffffff;
                }

                i {
                  font-family: PingFang SC, PingFang SC;
                  font-size: 18px;
                  color: #26ceee;
                  font-style: normal;
                  margin-top: -20px;
                  font-weight: 1100 !important;
                }

                p::after {
                  content: "";
                  position: absolute;
                  left: 0;
                  top: 0;
                  // transform: translate(-50%,-50%);
                  width: 78px;
                  height: 78px;
                  display: block;
                  background: url("~@/assets/iotimg/内容1.png") no-repeat center
                    center;
                  background-size: cover;
                  background-position: 100% 100%;
                  animation: rotate 6s infinite linear;
                }
                &:nth-child(2),
                &:nth-child(3) {
                  //   background: red;

                  p::after {
                    background: url("~@/assets/iotimg/内容2.png") no-repeat
                      center center;
                    background-size: cover;
                    background-position: 100% 100%;
                  }
                }
              }
            }
          }

          &:nth-child(3) {
            // background: red;

            .boxdata-contet {
              display: flex;
              flex-direction: column;

              .warn-title {
                height: 35px;
                margin: 10px 0 5px;
                // background: yellow;
                display: flex;
                justify-content: space-between;

                .but-left {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 12px;
                  color: #ffffff;
                  display: flex;
                  align-items: center;

                  .tab-button {
                    padding: 5px;
                    cursor: pointer;
                    transition: background-image 0.3s ease;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 14px;
                    color: #ffffff;
                  }

                  .tab-button.active {
                    background: linear-gradient(
                      180deg,
                      rgba(32, 115, 238, 0) 0%,
                      #2073ed 100%
                    );
                    border-radius: 0px 0px 0px 0px;
                    border: 1px solid #1e6adc;
                  }
                }

                .but-right {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 14px;
                  color: #ffffff;
                  display: flex;
                  align-items: center;
                }
              }

              .warn-data {
                margin-top: 24px;
                height: 70px;
                // background: skyblue;
                display: flex;

                color: white;

                .warnd-box {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  // align-items: center;
                  margin-right: 40px;
                  &:last-child {
                    margin-right: 0;
                  }

                  .warnd-bottom {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 600;
                    font-size: 20px;
                    height: 28px;
                    color: #fff691;
                    line-height: 28px;
                    letter-spacing: 1px;
                    width: 100%;
                  }

                  &:nth-child(1) {
                    .box-icon {
                      border-left: 10px solid #fff691;
                    }
                    .warnd-bottom {
                      color: #fff691;
                      background: linear-gradient(
                        90deg,
                        rgba(255, 246, 145, 0.7) 0%,
                        rgba(255, 246, 145, 0) 100%
                      );
                    }
                  }

                  &:nth-child(2) {
                    .box-icon {
                      border-left: 10px solid #2ab0ff;
                    }
                    .warnd-bottom {
                      color: #2ab0ff;
                      background: linear-gradient(
                        90deg,
                        rgba(42, 176, 255, 0.7) 0%,
                        rgba(42, 176, 255, 0) 100%
                      );
                    }
                  }

                  &:nth-child(3) {
                    .box-icon {
                      border-left: 10px solid #c436ea;
                    }
                    .warnd-bottom {
                      color: #c436ea;
                      background: linear-gradient(
                        90deg,
                        rgba(196, 54, 234, 0.7) 0%,
                        rgba(196, 54, 234, 0) 100%
                      );
                    }
                  }

                  .box-topd {
                    margin-bottom: 15px;
                    display: flex;
                    align-items: center;

                    .box-icon {
                      width: 0;
                      height: 0;
                      border-top: 10px solid transparent;
                      border-right: 10px solid transparent;
                      border-bottom: 10px solid transparent;
                    }

                    .box-text {
                      font-family: PingFang SC, PingFang SC;
                      font-weight: 600;
                      font-size: 15px;
                      letter-spacing: 1px;
                    }
                  }
                }
              }

              .warn-view {
                flex: 1;
                max-height: 203px;
                // background: skyblue;
              }
            }
          }

          &:nth-child(1) {
            .boxdata-contet {
              display: flex;
              flex-direction: column;

              .device {
                height: 70px;
                margin: 10px 0;
                display: flex;

                .device-one,
                .device-two {
                  display: flex;
                  align-items: center;
                  padding-left: 15px;

                  .dev-img {
                    width: 45px;
                    height: 45px;
                    background-size: cover;
                    background-size: 100% 100%;
                  }

                  .dev-cont {
                    cursor: pointer;
                    p {
                      margin: 0;
                      margin-left: 20px;
                      padding: 0;

                      &:nth-child(1) {
                        margin-bottom: 5px;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 600;
                        font-size: 15px;
                        color: #ffffff;
                      }

                      &:nth-child(2) {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 600;
                        font-size: 17px;
                        color: #ffffff;
                        margin-left: -20px;
                      }
                    }
                  }
                }
                @keyframes rotateone {
                  0% {
                    transform: rotate(360deg);
                  }
                  50% {
                    transform: rotate(300deg);
                  }
                  100% {
                    transform: rotate(300deg);
                  }
                }

                .device-one {
                  flex: 1;
                  margin-right: 35px;
                  border-left: 4px solid #6f53f6;
                  background: linear-gradient(
                    90deg,
                    rgba(117, 85, 255, 0.7) 0%,
                    rgba(117, 85, 255, 0) 100%
                  );

                  .dev-img {
                    background: url("~@/assets/iotimg/摄像头图标1.png")
                      no-repeat center center;
                    // animation: rotateone 2s linear infinite;
                  }
                }

                @keyframes rotate {
                  from {
                    transform: rotate(0deg);
                  }
                  to {
                    transform: rotate(120deg);
                  }
                }

                .device-two {
                  flex: 1;
                  border-left: 4px solid #5ec1ad;
                  background: linear-gradient(
                    90deg,
                    rgba(94, 193, 173, 0.7) 0%,
                    rgba(94, 193, 173, 0) 100%
                  );

                  .dev-img {
                    background: url("~@/assets/iotimg/风机图标.png") no-repeat
                      center center;
                    animation: rotate 3s linear infinite;
                  }
                }
              }

              .device-content {
                flex: 1;
                // background: skyblue;
              }
            }
          }

          .boxdata-title {
            padding-left: 20px;
            line-height: 30px;
            height: 30px;
            background: url("~@/assets/iotimg/大事记小标题.png") no-repeat
              center center;
            background-size: cover;
            background-size: 100% 100%;
            font-family: PingFang SC, PingFang SC;
            font-weight: 800;
            font-size: 17px;
            color: #ffffff;
            // line-height: 21px;
            text-align: left;
          }

          .boxdata-contet {
            flex: 1;
          }
        }
      }

      .data-bot {
        // background: red;
        height: 250px;
        display: flex;
        flex-direction: column;

        .boxdata-title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          text-align: left;
          font-size: 17px;
          color: #ffffff;
          padding-left: 30px;
          line-height: 30px;
          height: 30px;
          background: url("~@/assets/iotimg/大事记小标题.png") no-repeat center
            center;
          background-size: cover;
          background-size: 100% 100%;
        }

        .boxdata-contet {
          flex: 1;
          display: flex;
          max-height: 220px;
          overflow: hidden;
          //   background: yellow;

          .event-left {
            flex: 1;
            margin-right: 15px;
            background: skyblue;
          }

          .event-right {
            // background: skyblue;
            flex: 1;
            display: flex;
            // justify-items: center;
            // padding-left: 150px;
            text-align: center;
            align-items: center;
            border: 1px solid #00baff;

            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 30px;
            letter-spacing: 5px;
            color: #ffffff;
          }
        }
      }
    }
  }

  .iot-bot {
    width: 100%;
    height: 20px;
    background: #003551;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: white;
    font-size: 14px;
    padding-right: 15px;
  }
}
</style>
